<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<!-- <div style="padding: 20px;width: 100%;">
			<div class="contantBox">
				<div>
					<div class="textTop">欢迎使用 {{this.$TOOL.data.get("WEBNAME")}} 系统！</div>
					<img src="img/index_bg.png" class="imgIndex">
				</div>
			</div>
		</div> -->
		<div style="margin: 20px;padding: 20px;width: 100%;background: #ffffff;">
			<!-- <div style="font-size: 21px;height: 60px;padding: 20px 20px 0 0;display: flex;justify-content: space-between;align-items: center;">
				<img :src="logo" style="width: 100px;">
				<div>
					<span style="font-family: 'STXingkai', sans-serif;font-weight: 400;font-size: 36px;color: #409EFF;">勤于思考 勇于创新 精益求精</span>
				</div>
			</div> -->
			<div class="contantBox">
				<div style="width: 90%;">
					<div class="textTop" style="margin: 25px 0 60px;">欢迎使用 {{ this.$TOOL.data.get("WEBNAME") }} 系统！</div>
					<div style="width: 100%;">
						<div class="one_body">
							<div @click="saleIndex" style="width: 49%;margin-bottom: 30px;">
								<p>
									<span>销售管理</span><br>
									<span class="in_click">快速进入></span>
								</p>
								<!-- <img src="img/welcome1.png"> -->
								<img src="@/assets/image/welcome1.png" alt="">
							</div>
							<div @click="procureIndex" style="width: 49%;margin-bottom: 30px;">
								<p>
									<span>采购管理</span><br>
									<span class="in_click">快速进入></span>
								</p>
								<!-- <img src="img/welcome2.png"> -->
								<img src="@/assets/image/welcome2.png" alt="">
							</div>
							<div @click="stockIndex">
								<p>
									<span>库存管理</span><br>
									<span class="in_click">快速进入></span>
								</p>
								<!-- <img src="img/welcome3.png"> -->
								<img src="@/assets/image/welcome3.png" alt="">
							</div>
							<div @click="productionIndex">
								<p>
									<span>生产管理</span><br>
									<span class="in_click">快速进入></span>
								</p>
								<!-- <img src="img/welcome4.png"> -->
								<img src="@/assets/image/welcome4.png" alt="">
							</div>
							<div @click="financeIndex">
								<p>
									<span>财务管理</span><br>
									<span class="in_click">快速进入></span>
								</p>
								<!-- <img src="img/welcome5.png"> -->
								<img src="@/assets/image/welcome5.png" alt="">
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
import draggable from 'vuedraggable'
import allComps from './components'
// import font from 'https://chanpin1.mzth.cn/six/STXINGKA.TTF'
export default {
	components: {
		draggable,
	},
	data() {
		return {
			customizing: false,
			allComps: allComps,
			selectLayout: [],
			defaultGrid: this.$CONFIG.DEFAULT_GRID,
			grid: [],
			value: '',
			logo: this.$TOOL.data.get('WEBLOGO')
		}
	},
	created() {
		this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
	},
	mounted() {
		this.$emit('on-mounted')
	},
	computed: {},
	methods: {
		saleIndex() {
			this.$router.push({path: '/sale/contract'});
		},
		procureIndex() {
			this.$router.push({path: '/procure/order'});
		},
		stockIndex() {
			this.$router.push({path: '/ware/stock'});
		},
		productionIndex() {
			this.$router.push({path: '/production/plan'});
		},
		financeIndex() {
			this.$router.push({path: '/finance/receivable'});
		},
	}
}
</script>

<style scoped lang="scss">
// @font-face {
// 	font-family: "STXingkai";
// 	src: url('https://chanpin1.mzth.cn/font/font.css');
// }
.one_body {
	cursor: pointer;
	font-size: 24px;
	font-weight: bold;
	color: #333333;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	div {
		display: flex;
		width: 32%;
		height: 260px;
		background: linear-gradient(139deg, #ECF5FE 0%, #F9FCFE 100%);
		border-radius: 20px 20px 20px 20px;
		padding: 50px 20px 30px 50px;
		justify-content: space-between;

		img {
			transform: translateY(50px);
			height: 85%;
			width: auto;
		}
	}
}

.in_click {
	font-weight: 400;
	font-size: 16px;
	color: #999999;
}


.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
}

.widgets-aside {
	width: 360px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	position: relative;
	overflow: auto;
}

.widgets-aside-title {
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.widgets-aside-title i {
	margin-right: 10px;
	font-size: 18px;
}

.widgets-aside-close {
	font-size: 18px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	cursor: pointer;
}

.widgets-aside-close:hover {
	background: rgba(180, 180, 180, 0.1);
}

.widgets-top {
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.widgets-top-title {
	font-size: 18px;
	font-weight: bold;
}

.widgets {
	transform-origin: top left;
	transition: transform .15s;
	display: flex;
}

.draggable-box {
	height: 100%;
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

.customize-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	cursor: move;
}

.customize-overlay label {
	background: var(--el-color-primary);
	color: #fff;
	height: 40px;
	padding: 0 30px;
	border-radius: 40px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: move;
}

.customize-overlay label i {
	margin-right: 15px;
	font-size: 24px;
}

.customize-overlay .close {
	position: absolute;
	top: 15px;
	right: 15px;
}

.customize-overlay .close:focus,
.customize-overlay .close:hover {
	background: var(--el-button-hover-color);
}


.widgets-list-item {
	display: flex;
	flex-direction: row;
	padding: 15px;
	align-items: center;
}

.widgets-list-item .item-logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(180, 180, 180, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-right: 15px;
	color: #6a8bad;
}

.widgets-list-item .item-info {
	flex: 1;
}

.widgets-list-item .item-info h2 {
	font-size: 16px;
	font-weight: normal;
	cursor: default;
}

.widgets-list-item .item-info p {
	font-size: 12px;
	color: #999;
	cursor: default;
}

.widgets-list-item:hover {
	background: rgba(180, 180, 180, 0.1);
}

.widgets-wrapper .sortable-ghost {
	opacity: 0.5;
}

.selectLayout {
	width: 100%;
	display: flex;
}

.selectLayout-item {
	width: 60px;
	height: 60px;
	border: 2px solid var(--el-border-color-light);
	padding: 5px;
	cursor: pointer;
	margin-right: 15px;
}

.selectLayout-item span {
	display: block;
	background: var(--el-border-color-light);
	height: 46px;
}

.selectLayout-item.item02 span {
	height: 30px;
}

.selectLayout-item.item02 .el-col:nth-child(1) span {
	height: 14px;
	margin-bottom: 2px;
}

.selectLayout-item.item03 span {
	height: 14px;
	margin-bottom: 2px;
}

.selectLayout-item:hover {
	border-color: var(--el-color-primary);
}

.selectLayout-item.active {
	border-color: var(--el-color-primary);
}

.selectLayout-item.active span {
	background: var(--el-color-primary);
}


.dark {
	.widgets-aside {
		background: #2b2b2b;
	}

	.customize-overlay {
		background: rgba(43, 43, 43, 0.9);
	}
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}

.contantBox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 30px;
	//   height: 100%;
	//   background: #ffffff;
	.textTop {
		width: 100%;
		font-size: 28px;
		font-weight: bold;
		letter-spacing: 2px;
		text-align: center;
		margin-bottom: 20px;
		//font-family: 'Alibaba Puhui', serif;
		font-family: "Microsoft YaHei";
	}

	.imgIndex {
		width: 700px;
		height: 500px;
	}
}
</style>
